<template>
  <div class="content-body">
    <el-scrollbar
      style="width: 100%;height: 100%;overflow-x: hidden;overflow-y: auto"
    >
      <grid-layout
        :layout="dataList"
        :col-num="12"
        :row-height="40"
        :auto-size="false"
        :is-draggable="setting"
        :is-resizable="setting"
        :use-css-transforms="true"
        :responsive="false"
        :use-style-cursor="false"
        :vertical-compact="true"
        :margin="[10, 10]"
      >
        <grid-item
          v-for="(item) in dataList"
          :key="item.id"
          :x="item.x"
          :y="item.y"
          :w="item.w"
          :h="item.h"
          :i="item.i"
          :style="{zIndex: item.zd}"
          @resized="resizedEvent"
          @moved="movedEvent"
        >
          <div class="custom-layout-column" style="width: 100%;height: 100%" :class="setting===true?'active':''">
            <body-item :height="item.h" :layout="layoutStyle" :menu="menuId" :column="item.id" @moreClick="moreCallBack" @entity-temp="entityTempCallBack" />
          </div>
        </grid-item>
      </grid-layout>
    </el-scrollbar>
  </div>
</template>

<script>
import VueGridLayout from 'vue-grid-layout';
const GridLayout = VueGridLayout.GridLayout;
const GridItem = VueGridLayout.GridItem;
import { queryAllUserColumn, queryAllGuestColumn, userSaveCustomLayout, goBack } from '@/api/portal/user/column';
import { getToken } from '@/utils/auth';
import BodyItem from './solt/bodyItem';
export default {
  name: 'PortalNewContent',
  components: { GridItem, GridLayout, BodyItem },
  props: {
    layout: {
      type: Object,
      default: () => {
        return {};
      }
    },
    menuId: {
      type: Number,
      default: null
    }
  },
  data() {
    return {
      dataList: [],
      id: null,
      setting: false,
      layoutStyle: {}
    };
  },
  watch: {
    menuId: {
      handler(newName, oldName) { // 值发生变化时
        this.setting = false;
        if (undefined !== newName && newName !== null) {
          this.id = newName;
          this.initMenu();
        }
      },
      immediate: false, // 父组件第一次传值时，执行handler，false则第一次不执行
      deep: false // formType为对象时，设置为true，此属性监听对象发生变化
    },
    layout(newName, old) {
      this.layoutStyle = newName;
      // this.layoutStyle = { color: newName.fontColor, backgroundColor: newName.mrzt, opacity: newName.tmd }
      // console.log(newName)
    }
  },
  methods: {
    init(data, lay) {
      this.id = data;
      this.layoutStyle = lay;
      this.initMenu();
    },
    setBody(data) {
      this.setting = data;
      if (data === false) {
        this.initMenu();
      }
    },
    userCustomSave() {
      userSaveCustomLayout(this.dataList).then(() => {
        this.$message.success('保存成功！');
        this.setting = false;
        this.initMenu();
      }).catch(() => {
        this.$message.error('保存失败！');
      });
    },
    userCustomCallBack() {
      goBack({ mid: this.id }).then(res => {
        this.$message.success('还原成功！');
        this.initMenu();
      }).catch(() => {
        this.$message.error('还原失败！');
      });
    },
    resizedEvent(i, newH, newW, newHPx, newWPx) {
      this.dataList = this.dataList.map(item => {
        if (item.i === i) {
          item.w = newW;
          item.h = newH;
        }
        return item;
      });
    },
    movedEvent(i, newX, newY) {
      this.dataList = this.dataList.map(item => {
        if (item.i === i) {
          item.x = newX;
          item.y = newY;
        }
        return item;
      });
    },
    initMenu() {
      if (undefined !== this.id && this.id !== null) {
        if (getToken()) {
          queryAllUserColumn({ mid: this.id }).then(res => {
            const { data } = res;
            this.dataList = data;
          });
        } else {
          queryAllGuestColumn({ mid: this.id }).then(res => {
            const { data } = res;
            this.dataList = data;
          });
        }
      }
    },
    addCallBack() {
    },
    moreCallBack(data) {
      this.$emit('parent-more', data);
    },
    entityTempCallBack(data) {
      this.$emit('parent-entity', data);
    }
  }
};
</script>

<style scoped>
.content-body {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
}
.custom-layout-column.active {
  border: 1px dashed #8c939d;
  border-radius: 4px;
}
.el-scrollbar >>> .el-scrollbar__wrap {
  overflow-x: hidden;
  overflow-y: auto;
}
</style>
